<template>
    <div class="cont">
        <list>
            <cell>
                <div class="top">
                    <image :src="datalist.AZT" class="img"></image>
                </div>
            </cell>
            <cell>
                <ul class="center">
                    <li class="contItem">
                        <text class="text key">安装地址:</text>
                        <text class="text">{{datalist.XXDZ}}</text>
                    </li>
                    <li class="contItem">
                        <text class="text key">联系电话:</text>
                        <text class="text">{{datalist.LXDD}}</text>
                    </li>
                    <li class="contItem">
                        <text class="text key">设备类型:</text>
                        <text class="text">{{datalist.SBLXMC}}({{datalist.SBXH}})</text>
                    </li>
                    <li class="contItem">
                        <text class="text key">运行状态:</text>
                        <text class="text">{{datalist.YXZT}}</text>
                    </li>
                    <li class="contItem">
                        <text class="text key">故障码:</text>
                        <text class="text">{{datalist.SBGZM}}</text>
                    </li>
                    <li class="textarea">
                        <textarea class="area" cols="" rows="6" @input="descArea" ref="textarea" placeholder="请在此处输入关于故障现象的描述"></textarea>
                    </li>
                </ul>
            </cell>
            <cell>
                <div class="bottom">
                     <p class='btn' @click="sureBtn">
                         <text class="btnText">确认</text>
                     </p>
                </div>
                <wxc-mask width="500"
                    height= '400'
                    border-radius="0"
                    duration="300"
                    mask-bg-color="#FFFFFF"
                    :overlay-can-close="true"
                    :has-overlay="true"
                    :show="show"
                    :has-animation="hasAnimation"
                    @wxcMaskSetHidden="wxcMaskSetHidden">
                    <text class="mark">{{title}}</text>
                </wxc-mask>
            </cell>
        </list>
    </div>
</template>
<script>
import wxcMask from 'weex-ui/packages/wxc-mask'
import event from '@/net/event'
export default {
    name: 'detail',
    data () {
        return {
            datalist: [],
            show: false,
            title: '',
            cont: ''
        }
    },
    components: {
        wxcMask
    },
    beforeCreate(){
        this.$notice.loading.show()
    },
    created(){
        this.$router.getParams().then(resData => {
            this.datalist = resData.datalist
        })
    },
    mounted() {
        this.$notice.loading.hide()
    },
    methods: {
        descArea() {
            if(this.$refs.textarea.attr.hasOwnProperty('value') && this.$refs.textarea.attr.value != '') {
                this.cont = this.$refs.textarea.attr.value
            } else if(this.$refs.textarea.attr.hasOwnProperty('value') == false || this.$refs.textarea.attr.value == ''){
                this.cont = ''
            }
        },
        sureBtn(){
            if(this.cont == '') {
                this.show = true
                this.title = '请输入故障描述'
                setTimeout(() => {
                    this.show = false
                }, 800)
            } else {
                let newDate = new Date()
                let year = newDate.getFullYear()
                let month = newDate.getMonth() + 1
                let day = newDate.getDate()
                let hour = newDate.getHours()
                let minutes = newDate.getMinutes()
                let seconds = newDate.getSeconds()
                if(month < 10) {
                    month = '0' + month
                }
                if(day < 10) {
                    day = '0' + day
                }
                if(hour < 10) {
                    hour = '0' + hour
                }
                if(minutes < 10) {
                    minutes = '0' + minutes
                }
                if(seconds < 10) {
                    seconds = '0' + seconds
                }
                let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
                event.gzsbsave(this.cont, this.datalist.LXDD, this.datalist.HZXM, time, this.datalist.SBLXMC, this.datalist.SB_LXID, this.datalist.SBXH, this.datalist.GZSBBJ, this.datalist.SBCJMC, this.datalist.SBGZM, this.datalist.DD_ID, this.datalist.XXDZ, '故障申报', this.datalist.CJSJ, this.datalist.SB_ID, this.datalist.SBGZQK, this.datalist.SBCJ).then(() => {
                    this.show = true
                    this.title = '故障已提交'
                    setTimeout(() => {
                        this.show = false
                        this.$router.back()
                    }, 800)
                })
            }
        },
        wxcMaskSetHidden(){
            this.show = false
        }
    }
}
</script>
<style scoped>
.cont{
    width: 750px;
}
.top{
    width: 750px;
    height: 250px;
    background-color: #fff;
}
.img{
    width: 750px;
    height: 250px;
}
.center{
    width: 750px;
    background-color: #fff;
    margin-top: 20px;
}
.contItem{
    width: 750px;
    height: 100px;
    padding-left: 20px;
    border-bottom-color: #f5f5f5;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.text{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.key{
    margin-right: 20px;
}
.textarea{
    height: 250px;
}
.area{
    width: 750px;
    height: 250px;
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
}
.bottom{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin-top: 52px;
    margin-bottom: 62px;
}
.btn{
    width: 285px;
    height: 60px;
    background-color:rgba(62,175,252,1);
    border-radius:10px;
    justify-content: center;
    align-items: center;
}
.btnText{
    font-size:28px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
.mark{
    display: block;
    width: 500px;
    height: 400px;
    line-height: 400px;
    text-align: center;
}
</style>
